<script>
export default {
  name: "Count",
  props: {
    good: {
      type: Object,
      default: () => ({})
    },
    min:{
      type:Number,
      default:1
    }
  },
  methods: {
    handleBlur(event) {
      this.$emit("blur", {goods_count: Number(event.detail.value), goods_id: this.good.goods_id})
    },
    handleAdd() {
      this.$emit("add", {goods_count:this.good.goods_count+1, goods_id: this.good.goods_id})
    },
    handleSub() {
      this.$emit("sub", {goods_count:this.good.goods_count-1, goods_id: this.good.goods_id})

    }
  },
}
</script>

<template>
  <view class="count">
    <button @click="handleSub">-</button>
    <input :value="good.goods_count" @blur="handleBlur"></input>
    <button @click="handleAdd">+</button>
  </view>
</template>

<style scoped lang="scss">
.count {
  width: 200rpx;
  height: 60rpx;
  display: flex;

  input {
    text-align: center;
    background-color: #f8f8f8;
    height: 100%;
  }

  button {
    background-color: #f8f8f8;
    border: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
